<template>
  <a-modal :title="title" :width="1000" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" :okText="$t('保存')"
    @cancel="handleCancel" :cancelText="$t('关闭')">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleName" :label="$t('规则名称')">
          <a-input :placeholder="$t('请输入规则名称')" v-model="model.ruleName" />
        </a-form-model-item>
        <a-form-model-item v-show="showRuleColumn" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleColumn"
          :label="$t('规则字段')">
          <a-input :placeholder="$t('请输入规则字段')" v-model.trim="model.ruleColumn" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleConditions" :label="$t('条件规则')">
          <j-dict-select-tag @input="handleChangeRuleCondition" v-model="model.ruleConditions"
            :placeholder="$t('请输入条件规则')" dictCode="rule_conditions" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleValue" :label="$t('规则值')">
          <a-input :placeholder="$t('请输入规则值')" v-model="model.ruleValue" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('状态')">
          <a-radio-group buttonStyle="solid" v-model="model.status">
            <a-radio-button value="1">{{$t('有效')}}</a-radio-button>
            <a-radio-button value="0">{{$t('无效')}}</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
  import {
    httpAction
  } from '@/api/manage'

  export default {
    name: 'PermissionDataRuleModal',
    data() {
      return {
        queryParam: {},
        title: this.$t('操作'),
        visible: false,
        model: {},
        ruleConditionList: [],
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        confirmLoading: false,
        permissionId: '',
        validatorRules: {
          ruleConditions: [{
            required: true,
            message: this.$t('请选择条件')
          }],
          ruleName: [{
            required: true,
            message: this.$t('请输入规则名称')
          }],
          ruleValue: [{
            required: true,
            message: this.$t('请输入规则值')
          }],
          ruleColumn: []
        },
        url: {
          list: '/sys/dictItem/list',
          add: '/sys/permission/addPermissionRule',
          edit: '/sys/permission/editPermissionRule'
        },
        showRuleColumn: true
      }
    },
    created() {},
    methods: {
      add(permId) {
        this.permissionId = permId
        //初始化默认值
        this.edit({
          status: '1'
        })
      },
      edit(record) {
        this.model = Object.assign({}, record)
        if (record.permissionId) {
          this.model.permissionId = record.permissionId
        } else {
          this.model.permissionId = this.permissionId
        }
        this.visible = true
        this.initRuleCondition()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields()
      },
      handleOk() {
        let that = this
        // 触发表单验证
        that.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!that.model.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.edit
              method = 'put'
            }
            httpAction(httpurl, that.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false;
          }
        })
      },
      handleCancel() {
        this.close()
      },
      initRuleCondition() {
        if (this.model.ruleConditions && this.model.ruleConditions == 'USE_SQL_RULES') {
          this.showRuleColumn = false
        } else {
          this.showRuleColumn = true
        }
      },
      handleChangeRuleCondition(val) {
        if (val == 'USE_SQL_RULES') {
          this.model.ruleColumn = ''
          this.showRuleColumn = false
        } else {
          this.showRuleColumn = true
        }
      }
    }
  }
</script>

<style scoped>

</style>
